<template>
  <swiper :options="swiperOption">
    <swiper-slide v-for="(item,index) in swiperSlides" :key="index">
      <img :src="item" alt="item">
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
  </swiper>
</template>

<script>
// import Vue from "vue";
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlides } from "vue-awesome-swiper";

export default {
  name: "carrousel",
  props: {
    swiperSlides: [Array]
  },
  data() {
    return {
      swiperOption: {
        notNextTick: true,
        loop: true,
        autoplayDisableOnInteraction: true,
        autoplay: {
          delay: 3000, //自动切换的时间间隔，单位ms
          speed: 1000,
          stopOnLastSlide: false, //当切换到最后一个slide时停止自动切换
          disableOnInteraction: false, //用户操作swiper之后，是否禁止autoplay。
          waitForTransition: true //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时。
        },
        navigation: {
          nextEl: ".swiper-button-next", //前进按钮的css选择器或HTML元素。
          prevEl: ".swiper-button-prev" //后退按钮的css选择器或HTML元素。
        },
        pagination: {
          el: ".swiper-pagination",
          type: "bullets",
          clickable: true //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
        }
      }
      // swiperSlides: [
      // require("../pagse/img/pro_banner_1.png"),
      // require("../pagse/img/pro_banner_2.png")
      // ]
    };
  },
  components: {
    swiper,
    swiperSlides
  }
};
</script>

<style scoped lang="less">
.p-banner {
  background-color: #fff;
  img {
    width: 750px;
    height: 400px;
    margin-bottom: -1px;
  }
}
.i-banner {
  img {
    width: 750px;
    height: 400px;
  }
}
</style>